<template>
  <div class="store">
    <Header title="" back>
      <div>
        <span class="iconfont">&#xe60c; </span>
        <input placeholder="搜索本店商品" />
      </div>
    </Header>
    <div class="store_content">
      <div class="store_tou">
        <img
          :src="'http://122.51.249.55:3000/' + storeList.store_banner"
          alt=""
        />

        <img
          :src="'http://122.51.249.55:3000/' + storeList.store_logo"
          alt=""
          class="store_logo"
        />
        <div class="shoucang">收藏</div>
        <div class="store_name">{{ storeList.store_name }}</div>
        <div class="store_grade">
          <ul>
            <li>
              <span>全部宝贝</span>
              <span> {{ storeList.store_count }}</span>
            </li>
            <li>
              <span>商家描述</span>
              <span> {{ storeList.store_deliverycredit }}</span>
            </li>
            <li>
              <span>服务态度</span>
              <span> {{ storeList.store_servicecredit }}</span>
            </li>
            <li>
              <span>物流速度</span>
              <span> {{ storeList.store_desccredit }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="recomend_goods all">
      <p>店长推荐</p>
      <ul>
        <li v-for="(item, index) in storeList.recomend_goods" :key="index">
          <img :src="'http://122.51.249.55:3000/' + item.original_img" alt="" />
          <p>{{ item.goods_name }}</p>
          <span>{{ item.shop_price }} </span>
        </li>
      </ul>
    </div>
    <div class="recomend_goods all">
      <p>热卖单品 精挑细选</p>
      <ul>
        <li v-for="(val, index) in storeList.hot_goods" :key="index">
          <img :src="'http://122.51.249.55:3000/' + val.original_img" alt="" />
          <p>{{ val.goods_name }}</p>
          <span>{{ val.shop_price }} </span>
        </li>
      </ul>
    </div>
    <div class="recomend_goods all">
      <p>新品上市 尝鲜价</p>
      <ul>
        <li v-for="(val, index) in storeList.new_goods" :key="index">
          <img :src="'http://122.51.249.55:3000/' + val.original_img" alt="" />
          <p>{{ val.goods_name }}</p>
          <span>{{ val.shop_price }} </span>
        </li>
      </ul>
    </div>
    <div class="store_bottom">
      <router-link :to="'/store/info/' + storeList.store_id">
        <span>店铺简介</span>
        <span> 联系卖家</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  components: {
    Header
  },
  data() {
    return {
      storeList: {}
    };
  },
  created() {
    this.getStoreList();
  },
  methods: {
    async getStoreList() {
      let { data: res } = await this.$axios.get("Store/index", {
        params: { store_id: this.$route.params.id }
      });
      this.storeList = res.result;
    }
  }
};
</script>

<style lang="less" >
.store {
  .ct {
    margin-left: 82px;
    div {
      width: 500px;
      height: 60px;
      padding-left: 40px;
      border-radius: 30px;
      background-color: #efefef;
      line-height: 60px;
      transform: translateY(14px);
      input {
        height: 60px;
        border: 0;
        background-color: #efefef;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        color: #737373;
      }
    }
  }
  .header .lt[data-v-61dd7a3d] {
    transform: translateY(50%);
    margin-left: 24px;
  }
  .store_content {
    background-color: #f5f5f5;
    margin-bottom: 20px;
    .store_tou {
      position: relative;
      width: 750px;
      height: 390px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .store_logo {
      width: 138px !important;
      height: 138px !important;
      border-radius: 50%;
      position: absolute;
      z-index: 1;
      top: 50px;
      left: 306px;
    }
    .shoucang {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 120px;
      height: 52px;
      text-align: center;
      line-height: 52px;
      background-color: #fc0000;
      border-radius: 26px;
      color: #fff;
      font-size: 32px;
    }
    .store_name {
      font-size: 28px;
      color: #ffffff;
      font-weight: 700;
      position: absolute;
      top: 217px;
      left: 306px;
    }
    .store_grade {
      width: 100%;
      height: 100px;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 26px;
          flex: 1;
          height: 100px;
          background-color: #000000;
          opacity: 0.4;
          color: #fff;
        }
      }
    }
  }
  .all {
    margin-bottom: 20px;
  }
  .recomend_goods {
    padding: 29px 24px 31px;
    p {
      color: #333333;
      font-size: 32px;
      font-weight: 700px;
      line-height: 31px;
      margin-bottom: 30px;
    }
    ul {
      display: flex;
      width: 110%;
      flex-wrap: wrap;
      li:nth-child(odd) {
        margin: 0 18px;
      }
      li {
        width: 222px;
        img {
          width: 222px;
          height: 222px;
        }
        span {
          font-weight: 700;
          font-size: 24px;
          margin-top: 17px;
          color: #ff0000;
          line-height: 36px;
        }
        p {
          margin-top: 17px;
          font-size: 24px;
          line-height: 36px;
          color: #999999;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .store_bottom {
    width: 100%;
    height: 88px;
    position: relative;
    bottom: 0;
    left: 0;
    border-top: 1px solid #737373;
    span {
      float: left;
      text-align: center;
      line-height: 87px;
      height: 88px;
      width: 50%;
      color: #333333;
      font-size: 24px;
    }
  }
}
</style>
